<template>
  <div style="margin-right: -10px">
    <div>
      <span>{{ order.order_sn }}</span>
      <span style="margin:0 40px" @click="showUser({user_id: user.user_id})" class="tbc-hover">
        <i class="el-icon-user-solid"></i>
        <span style="margin-left:4px">{{ user.nick_name }}</span>
      </span>
      <span>{{ order.order_time }}</span>
    </div>
    <table class="test" cellspacing="0" style="width: 100%;">
      <tr v-for="(goods, index) in rows" :key="index" style="background: inherit">
        <td style="width: 100%">
          <div style="float:left;width:80px;height:80px">
            <el-image :src="goods.goods_image"></el-image>
          </div>
          <div style="padding:0 50px 0 100px;line-height: 1.5">
            <p><span>{{ goods.goods_name }}</span></p>
            <p><span style="color: #909399">{{ goods.goods_sku_text }}</span></p>
          </div>
        </td>
        <td style="vertical-align: top;text-align: center;">
          <p class="cell" style="width: 120px;">¥{{ goods.goods_price }}</p>
          <p class="cell" style="width: 120px;font-size: 12px" v-if="goods.integral">（积分:{{ goods.integral }}）</p>
        </td>
        <td style="vertical-align: top;text-align: center;">
          <p class="cell" style="width: 120px;">{{ goods.goods_number }}</p>
        </td>
        <td style="vertical-align: top;text-align: center;">
          <p class="cell" style="width: 120px;" v-if="!goods.is_refund">退款</p>
        </td>
      </tr>
    </table>
    <div v-if="refund.refund_sn">
      <span>退款编号：{{ refund.refund_sn }}</span>
      <span style="margin:0 40px">
        <span>退款金额：</span>
        <span style="margin-left:4px;color: #FA5151">{{ refund.refund_amount }}</span>
      </span>
      <span>退款原因：</span>
      <span style="color: #FA5151;margin-right: 40px">{{ refund.reason }}</span>
    </div>
  </div>
</template>
<script lang="ts">
import {defineComponent, computed} from 'vue'

export default defineComponent({

  props: {
    item: {
      type: Object,
      default() {
        return {}
      }
    }
  },

  setup(props: any, {emit}) {

    const order = computed(() => {
      return (props.item.basic && props.item.basic.data.field) || {}
    })

    const rows = computed(() => {
      return (props.item.goods && props.item.goods.data.list) || []
    })

    const user = computed(() => {
      if (!props.item.basic) return {}
      return (props.item.user && props.item.user.data.field) || {}
    })

    const refund = computed(() => {
      if (!props.item.refund) return {}
      return (props.item.refund && props.item.refund.data.field) || {}
    })

    const showUser = (user: {user_id:string}) => {
      emit('showUser', user)
    }

    return {
      order, rows, user, showUser, refund
    }
  }



  // methods: {
  //   showUser(data) {
  //     this.$emit('show-user', data)
  //   },
  //
  //   showDetail(data) {
  //     this.$emit('show-detail', data.order_sn)
  //   }
  // }
})
</script>
<style>
.el-table .test td {
  border-bottom: 0
}
</style>
